import React from 'react';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'

const Style = {};

Style.active = {
    color: '#ff4400'
}

Style.unactive = {
    color: '#369369'
}

const CustomLink = ({to, exact, label}) => {
    return (<Route path={to} exact={exact} children={
    ({match}) => {
        return <div style={match? Style.active: Style.unactive}>{match?"* ": "# "}<Link to={to}>{label}</Link></div>
    }}>
    </Route>);
}

const User = ()=> (
    <div>UserCf</div>
)

const App = ()=> {
    return <Router basename="/ck">
        <div>
            <CustomLink to="/" exact label="Index"></CustomLink>
            <CustomLink to="/ccf" label="User Ccf"></CustomLink>
            <Route path="/ccf" component={User}></Route>
        </div>
    </Router>;
}

export default App;

